<template>
  <div v-loading="isloading"  ref="maincontainer" class="blog-list-container">
    <ul>
      <li v-for="item in data.rows" :key="item.id">
        <div class="thumb" v-if="item.thumb">
          <router-link :to="{
            name:'BlogDetail',
            params:{
              id:item.id,
            }
          }">
            <img
              v-lazy="item.thumb"
              :alt="item.title"
              :title="item.title"
            />
          </router-link>
        </div>
        <div class="main">
          <router-link :to="{
            name:'BlogDetail',
            params:{
              id:item.id,
            }
          }">
            <h2>{{item.title}}</h2>
          </router-link> 
          <div class="aside">
            <span>日期：{{setDate(item.createDate)}}</span>
            <span>浏览：{{item.scanNumber}}</span>
            <span>评论：{{item.commentNumber}}</span>
            <router-link :to="{
              name:'CategoryBlog',
              params:{
                categoryId:item.category.id
              }
            }">{{item.category.name}} </router-link>
          </div>
          <div class="desc">
            {{item.description}}
          </div>
        </div>
      </li>
    </ul>
    <!-- 分页放到这里 -->
    <Pager v-if="data.total&&data.total!== 0" :current="routerInfor.page" :total="data.total" :limit="routerInfor.limit" :visibleNumber="10" @PagerChanger="handlePage"></Pager>
    <Empty v-if="data.rows.length === 0 && !isloading "></Empty>
  </div>
</template>
<script>

import Pager from '../../../components/Pager/index.vue';
import fetchData from '../../../mixins/fetchData';
import { getBlogs } from '../../../api/blog';
import setDate from "../../../utils/setDate"
import setmainScroll from "../../../mixins/setmainScroll.js";
import Empty from '../../../components/Empty/index.vue';
// import { watch } from 'vue';
export default {
    mixins:[fetchData({rows:[],total:0}),setmainScroll('maincontainer')],
    components: { Pager, Empty },
    computed:{
      //获取路由信息
routerInfor(){
    const categoryId = +this.$route.params.categoryId || -1;
    const page = +this.$route.query.page || 1;
    const limit = +this.$route.query.limit || 10;
    return{
        categoryId,page,limit,

    }
}
    },
    methods:{
      
        setDate,//时间处理方法
        async fetchData(){
            
           return await getBlogs( this.routerInfor.Page,this.routerInfor.limit,this.routerInfor.categoryid);
        },
        handlePage(newpage){
          
        const query={
            page:newpage,
            limit:this.routerInfor.limit,
               

        };
      
     //不带有分类的 跳转页
           if(this.routerInfor.categoryId=== -1){
          this.$router.push({
           name:"Blog",
           query,
       })
       }else{
                //带有分类的本分类跳转页
         this.$router.push({
           name:"CategoryBlog",
           query,
           params:{
               categoryId:this.$route.params.categoryId
           }
         })  
        }
             
     }
    },
   watch:{
    async $route(){
     this.isloading=true;
     this.$refs.maincontainer.scrollTop = 0;
     this.data= await this.fetchData();
     this.isloading=false;

  } 
    }
}
</script>
<style scoped lang="less">
@import "../../../style/var.less";
.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
li {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid @gray;
  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;
    img {
      display: block;
      max-width: 200px;
      border-radius: 5px;
    }
  }
  .main {
    flex: 1 1 auto;
    h2 {
      margin: 0;
    }
  }
  .aside {
    font-size: 12px;
    color: @gray;
    span {
      margin-right: 15px;
    }
  }
  .desc {
    margin: 15px 0;
    font-size: 14px;
  }
}
</style>
